<template>
    <div v-if="visual" class="progress_wrap">
        <div class="progress">
            <el-progress :percentage="percentage" :text-inside="true" striped striped-flow :duration="5"
                color="#004440">
                <div style="width: 100%">
                    <span class="percentage txt">{{ percentage }}%</span>
                    <span class="stop_simulate txt" @click="stopSimulate">停止模拟</span>
                </div>
            </el-progress>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance, watch } from 'vue';
import { useStore } from '@/stores';
const { proxy } = getCurrentInstance();
const store = useStore();
const bus = proxy.$bus;
const visual = ref(false);
const percentage = ref(0);

watch(() => store.mode, () => {
    visual.value = false;
});
onMounted(() => {
    bus.on("startSimulation", () => {
        if (store.mode != 'fire') {
            visual.value = true;
        }
    });
    bus.on("simCreationFailed", () => {
        visual.value = false;
    });
    bus.on("simCanceled", () => {
        visual.value = false;
    });
    bus.on("simProgress", args => {
        const current = args['stepCurrent'];
        const total = args['stepTotal'];
        if (!total) {
            console.log("没有获取到总step");
            return;
        }
        if (store.mode != 'fire') {
            if (current >= total - 1) {
                percentage.value = 100;
                visual.value = false;
                bus.emit("showDownload", args);
            } else {
                visual.value = true;
                let per = current / total * 100;
                per = per.toFixed(0);
                percentage.value = Number(per);
            }
        }
        bus.emit("showDownload", args);
    });
});
const stopSimulate = () => {
    bus.emit("cancelSimCreation", null);
}
</script>
<style scoped lang="scss">
.progress_wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}

.progress {
    width: 30vw;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);

    .percentage {
        margin-right: 50px;
        margin-left: 10px;
    }

    .stop_simulate {
        cursor: pointer;
        color: #fff;
    }

    .txt {
        text-shadow: 1px 0 #000,
            -1px 0 #000,
            0 1px #000,
            0 -1px #000,
            1px 1px #000,
            -1px -1px #000,
            1px -1px #000,
            -1px 1px #000;
    }

    @media screen and (max-width:1920px) {
        :deep(.el-progress-bar__outer) {
            height: 24px !important;
        }

        :deep(.el-progress-bar__innerText span) {
            font-size: 14px;
            margin-right: 10px;
        }
    }

    @media screen and (min-width:1921px) {
        :deep(.el-progress-bar__outer) {
            height: 48px !important;
        }

        :deep(.el-progress-bar__innerText span) {
            font-size: 40px;
            margin-right: 50px;
        }
    }
}
</style>